0

Tengo gran cantidades de elementos HTML5 que poseen el tag <a>, de la siguiente forma por ejemplo:

<a class="GloIT" href="CD" id="1" title="CD">CD</a>

La idea es poder diferenciar el término (para el ejemplo "CD") por categoría y que luego pueda capturar según corresponda. Por ejemplo, si se está leyendo la descripción de un término "X" en la sección "Multimedia" y allí dentro de su contenido aparece un enlace de la forma:

<a class="GloIT" href="CD" id="3" title="CD">CD</a>.

Quiero que sólo muestre la definición de "CD", pero sólo la que está en la sección "Multimedia" y no la que está en "Informática" (en el cual también hay una definición para "CD"), sino lo diferencio de esta manera me trae las dos definiciones y no quiero eso. O sea que se adapte al contexto en el que está.

Por eso lo empecé a diferenciar con ese id="1" (informática), id="2" (redes), id="3" (multimedia), etc., en donde hay más de un término en diferentes categorías. Todo eso está funcionando perfecto en JavaScript. No es un problema concreto de código.

El inconveniente es que me di cuenta que Dreamweaver me marca como error en los que aparece ese id y donde hay más de uno. Me pone lo siguiente:

"The id value [1] must be unique"

.

Entendiendo que dice que el valor id debe ser único. En mi caso siempre son 4 (id) ya que son 4 categorías, pero claro esos id se pueden repetir en el contenido de una definición. A lo mejor puedo obviar ese error que me arroja Dreamweaver, al no ser algo grave y dejarlo así. ¿O bien que otro atributo me recomiendan utilizar del tag <a>? Ya el atributo class, como ya ven, lo estoy utilizando. Recuerden que es HTML5.

Espero haberme explicado sobre lo que quiero hacer.

3
  • Porque no usas ids asi: informatica1, informatica2 ...
    – alanfcm
    Commented el 14 sept. 2018 a las 15:57
  • Es que tengo más de 9000 definiciones. Además, yo desde JavaScript sólo pregunto por ese atributo: if (typeof $(this).attr("id") !=="undefined") {if ($(this).attr("id")!=="") {document.getElementById("opcion").value=$(this).attr("id")}} Con el valor de "opción" ya sabe a que categoría ir. Luego se hace todo desde PHP. Commented el 14 sept. 2018 a las 16:02
  • Me imagino que si tienes 9000 definiciones las generas con algun bucle. De ese modo es facil agregar ids unicas concatenando un contador. Otra opcion es agregando otra clase asi: <a class="GloIT informatica" href="CD" data-id="1" title="CD">CD</a> y luego puedes diferenciar utilizando this.
    – alanfcm
    Commented el 14 sept. 2018 a las 16:08

1 respuesta 1

3

Para almacenar este tipo de información se suelen usar los útiles atributos personalizados que nos brinda el bueno de HTML5:

HTML

<li id="marvel-1" data-comics="1423" data-sexo="M">Capitán América</li>
<li id="marvel-2" data-comics="321" data-sexo="F">Capitana Marvel</li>
<li id="marvel-3" data-comics="2575" data-sexo="M">Spider Man</li>

Son muy útiles para aportar información extra en nuestros elementos HTML, semanticamente entendible y estructurada.

Además son muy sencillos de operar desde Jquery:

JQUERY

var sexo = $('#marvel-1').data('sexo');
3
  • Mira que bueno eso del data, no me había dado cuenta. Lo que viene después del guión de ese data (data-comics, data-sexo, data-sección, etc.) ¿uno puedo poner lo que quiera? ¿o ya hay una lista establecida? Commented el 14 sept. 2018 a las 16:20
  • @DamianGarcia puedes poner lo que quieras, haz de cuenta que data es un arreglo y lo que va despues del - es el nombre del indice.
    – Andrés
    Commented el 14 sept. 2018 a las 16:38
  • Perfecto, ahora me queda de la forma: <a class="GloIT" href="CD" data-id="3" data-seccion="Multimedia" title="CD">CD</a> Commented el 14 sept. 2018 a las 16:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.